<!-- 
 * 示例项新增，编辑组件
 * @author: 
 * @since: 2022-05-16
 * index.vue
-->
<template>
  <div class="example-item-container detailsPageBox p20">
    <div class="detailsMain">
      <el-form :model="form" :rules="rules" ref="validateForm">
        <el-row>
          <el-col :span="10">
            <el-form-item label="示例说明标题：" prop="sampleTitle">
              <el-input v-model="form.sampleTitle" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="示例项名称：" prop="sampleName">
              <inputCustom :model="form.sampleName" placeholder="填写示列说明名称" :maxLength="64" @inputEvent="inputExampleExplainName"></inputCustom>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="示例项内容：" prop="sampleContent" :required="true" class="noRules">
              <TextEditor @textEdit="textEdit" :html="form.sampleContent"></TextEditor>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="是否启用：" :required="true" class="noRules">
              <el-radio-group v-model="form.valid">
                <el-radio :label="item.label" v-for="(item, index) in radioList" :key="index">{{ item.value }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="detailsHandleBtn">
      <el-button type="primary" size="mini" @click="submit">提交</el-button>
      <el-button size="mini" @click="reset">重置</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, defineProps } from 'vue';
import { addExampleItemApi, editExampleItemApi } from '@/api/interface/exampleExplain.js'
import { detailHandleFinish } from '@/utils/common.js'
import { ElMessage } from 'element-plus'
import { sessionstorage } from "@/utils/storage";

const props = defineProps({
  isAdd: {//判断是新增还是编辑
    type: Boolean,
    default: true
  }
})

const form = reactive({
  sampleTitle: '',//示例说明标题
  sampleName: '',//示例说明名称
  sampleContent: '',//示例说明内容
  valid: true,//是否启用
  sampleTitleId: '',//示例说明标题id
  id: '',//示例说明id

})

const state = reactive({
  exampleItem: {}
})

//form表单
const validateForm = ref(null)

//是否启用列表
const radioList = reactive([
  {
    label: true,
    value: '是'
  },
  {
    label: false,
    value: '否'
  }
])

//表单验证 
const rules = {
  sampleTitle: [{ required: true, message: '必填项', trigger: 'blur' }],
  sampleName: [{ required: true, message: '必填项', trigger: 'blur' }],
};

const exampleTitleData = sessionstorage.get('exampleData')
form.sampleTitleId = exampleTitleData.id
form.sampleTitle = exampleTitleData.sampleTitle


if (props.isAdd) {//新增
  form.sampleName = ''//示例说明名称
  form.sampleContent = ''//示例说明内容
  form.valid = true//是否启用
} else {
  if (sessionstorage.get('exampleItem')) {//编辑
    state.exampleItem = sessionstorage.get('exampleItem')
    for (let key in form) {
      if (state.exampleItem[key]) {
        form[key] = state.exampleItem[key]
      }
      if (key === "valid") {
        form[key] = state.exampleItem[key]
      }
    }
  }
}
//示例说明名称事件
const inputExampleExplainName = (value) => {
  form.sampleName = value;

}
const textEdit = (text, type) => {
  form.sampleContent = text;
}
//提交
const submit = () => {
  validateForm.value.validate((valid) => {
    if (valid) {
      const parmas = {
        id: form.id,
        sampleTitleId: form.sampleTitleId,
        sampleName: form.sampleName,
        sampleContent: form.sampleContent,
        valid: form.valid
      }
      if (form.sampleContent === '<p><br></p>') {
        ElMessage({
          message: '示例说明内容必填项',
          type: 'warning',
        })
      } else {
        if (form.id) {//编辑
          editExampleItemApi(parmas).then(res => {
            detailHandleFinish(res, 'ExampleExplainItem')
          })
        } else {//新增

          addExampleItemApi(parmas).then(res => {
            detailHandleFinish(res, 'ExampleExplainItem')
          })
        }
      }
    } else {
      console.log('没通过验证');
    }
  });

}

//重置
const reset = () => {
  validateForm.value.resetFields()
  if (!props.isAdd) {
    form.valid = state.exampleItem['valid']
  } else {
    form.valid = true
  }

}

</script>

<style lang="scss" scoped>
.example-item-container {
  .w700 {
    width: 700px;
  }
}
</style>
